<!--
 * @Description: 底部第四个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: liqi
 * @LastEditTime: 2022-09-07 19:15:27
-->
<template>
  <div ref="container" style="height: 95%"></div>
</template>

<script>
import { Column } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    loadChart() {
      const data = [
        {
          name: "文科",
          month: "Jan.",
          value: 70,
          type: "语文",
        },
        {
          name: "理科",
          month: "Jan.",
          value: 67,
          type: "数学",
        },
        {
          name: "文科",
          month: "Jan.",
          value: 90.5,
          type: "英语",
        },
        {
          name: "文科",
          month: "Jan.",
          value: 62.4,
          type: "美术",
        },
        {
          name: "理科",
          month: "Jan.",
          value: 72.4,
          type: "线性代数",
        },
        {
          name: "文科",
          month: "Feb.",
          value: 82.5,
          type: "语文",
        },
        {
          name: "理科",
          month: "Feb.",
          value: 65.5,
          type: "数学",
        },
        {
          name: "文科",
          month: "Feb.",
          value: 79,
          type: "英语",
        },
        {
          name: "文科",
          month: "Feb.",
          value: 81.5,
          type: "美术",
        },
        {
          name: "理科",
          month: "Feb.",
          value: 82.4,
          type: "线性代数",
        },
        {
          name: "文科",
          month: "Mar.",
          value: 77.5,
          type: "英语",
        },
        {
          name: "理科",
          month: "Mar.",
          value: 65.5,
          type: "数学",
        },
        {
          name: "文科",
          month: "Mar.",
          value: 72,
          type: "语文",
        },
        {
          name: "文科",
          month: "Mar.",
          value: 85.4,
          type: "美术",
        },
        {
          name: "理科",
          month: "Mar.",
          value: 82.5,
          type: "线性代数",
        },
      ];
      fetch(
        "https://gw.alipayobjects.com/os/antfincdn/cK%24sTxSsah/stack-group-column.json"
      )
        .then((data) => data.json())
        .then((data) => {
          const column = new Column(this.$refs["container"], {
            data,
            xField: "month",
            yField: "value",
            isGroup: true,
            isStack: true,
            seriesField: "type",
            groupField: "name",
            // 更改提示框样式
            tooltip: {
              domStyles: {
                "g2-tooltip": {
                  backgroundColor: "#03255f",
                  color: "#fff",
                },
              },
            },
          });

          column.render();
        });
    },
  },
  created() {},
  mounted() {
    this.loadChart();
  },
};
</script>
<style scoped>
</style>